<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   <!-- 在IE运行最新渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 初始化移动浏览显示，让网页宽度等于物理设备宽度 -->
    <title>layer实现图片点击放大居中效果测试</title>
    <!-- Bootstrap框架的css样式 -->
    <link href="../moudle/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--自己的样式文件 -->
    <link href="../css/style.css" rel="stylesheet">
    <!-- 为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可 -->
    <!-- 为使IE6、7、8版本浏览器兼容css3样式，引入下面代码 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div id="light_box">
  	<ul>
  		<li>
  			<a href="../webhtml/img/1.jpg" class="imgbtn" rel="lightbox">
  				<img id="1" src="../webhtml/img/1.jpg" alt="">
  			</a>
		</li>
  		<li>
  			<a href="../webhtml/img/2.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/2.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/3.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/3.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/4.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/4.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/3.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/3.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/4.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/4.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/1.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/1.jpg" alt="">
  			</a>
		</li>
		<li>
  			<a href="../webhtml/img/2.jpg" class="imgbtn" rel="lightbox">
  				<img src="../webhtml/img/2.jpg" alt="">
  			</a>
		</li>
  	</ul>
  	<div style="clear:both;"></div>
  </div>

<div id="layerbox">
	<img layer-src="../webhtml/img/1.jpg" src="../webhtml/img/1.jpg" alt="">
	<img layer-src="../webhtml/img/2.jpg" src="../webhtml/img/2.jpg" alt="">
	<img layer-src="../webhtml/img/3.jpg" src="../webhtml/img/3.jpg" alt="">
	<img layer-src="../webhtml/img/4.jpg" src="../webhtml/img/4.jpg" alt="">
</div>

<a href="javascript:" id="btn1">点击我</a>
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery
    <script src="../moudle/jquery/jquery.js"></script>
    包括所有bootstrap的js插件或者可以根据需要使用的js插件调用
    <script src="../moudle/bootstrap/js/bootstrap.js"></script> -->
     

	<!-- 引入require模块，关联../js/index.js -->
	<script src="../moudle/requirejs/require.js" data-main="../js/index"></script>

  </body>
</html>
